.chapter-cover-container{
  background:#ffffff !important;
  .chapter-num{
    width: 400px;
    height: 335px;
    position: absolute;
    top:305px;
    left:50%;
    margin-left: -200px;
    text-align: center;
    >h1{
      font-size: 180px;
      color: #4472b2;
      font-family: 'songti';
      position: absolute;
      width: 100%;
      bottom: 0;
      top: 0;
      z-index: 1;
      line-height: 200px;
      height: 200px;
    }
    .cover-triangle{
      background: url("~assets/images/cover-triangle.png") no-repeat;
      background-size:  100% 100%;
      width: 360px;
      height: 128px;
      position: absolute;
      bottom: 113px;
      left: 0;
      z-index: 2;
    }
    .cover-line{
      position: absolute;
      width: 20px;
      height: 3px;
      bottom: 90px;
      left: 50%;
      margin-left: -10px;
      z-index: 3;
      background: #4472b2;
    }
    >h4{
      font-size: 30px;
      color: #4472b2;
      position: absolute;
      bottom: 45px;
      width: 100%;
      text-align: center;
      z-index: 20;
    }
    >h6{
      color: #4472b2;
      font-size: 18px;
      width: 100%;
      position: absolute;
      bottom: 0;
      text-align: center;
    }

  }
}

/*第六章：第一象限和第二象限 ，类似于倒影的图表样式*/
.reflection_container {
  .analysis_chart {
    margin-top: 10px;
    padding: 0 35px;
    .analysis_chart_box {
      height:595px;
      position: relative;
      background: #FFF;
      .chart-box {
        width: 100%;
        height: 520px;
      }
      .y-name {
        position: absolute;
        top: 35px;
        right: 4%;
        font-size: 12px;
        color: #989898;
      }
      .vertical-name-1{
        line-height: 15px;
        position: absolute;
        top: 10%;
        right: 2%;
        text-align: right;
        font-size: 12px;
        color: #989898;
        width: 10px;
      }
      .vertical-name-2{
        line-height: 15px;
        position: absolute;
        bottom: 18%;
        right: 2%;
        text-align: right;
        font-size: 12px;
        color: #989898;
        width: 10px;
      }
      >h3{
        color: #666;
        font-size: 18px;
        position: absolute;
        font-weight: normal;
        width: 100%;
        text-align: center;
        bottom: 20px;
      }
      .mark{
        color: #666;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        width: 160px;
        margin: 0 auto;
        >div{
          width: 80px;
          height: 20px;
          >i{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            margin: 0 5px 0 0 ;
            background: -webkit-gradient(linear,left top,left bottom,from(#5686b9),to(#8eb5d6));
          }
          &:nth-child(2)>i{
            background: -webkit-gradient(linear,left top,left bottom,from(#a9d49e),to(#70bf72));
          }
        }

      }
    }

  }
  >h4{
    color: #666;
    text-align: center;
    width: 100%;
    padding: 20px 0 25px ;
    >b{
      color: #000;
    }
  }
  .detail-title{
    color: #0a122d;
    font-weight: 700;
    padding: 0 35px;
  }
}
/*
第六章：饼状(左) + 描述(右) 分布图，前面几个章节也有这种图表
*/
.pie-desc-distribution-chart{
  height: auto;
  margin: 20px 35px 0 35px;
  position: relative;
  background: #ffffff;
  height: 470px;
  .pie-chart{
    width: 50%;
    height:460px;
  }
  .pie-chart-desc{
    margin: 100px 0 0 30px;
    >tbody{
      >tr{
        >td{
          color: #666;
          >b{
            color: #0A122D;
          }
          >i{
            width: 10px;
            height:10px;
            display: inline-block;
            border-radius: 10px;

            &.i-1{
              background: linear-gradient(to bottom, #4b8bc9, #91ecb4);
            }
            &.i-2{
              background: linear-gradient(to bottom, #75c075, #a4d39b);
            }
            &.i-3{
              background: linear-gradient(to bottom, #f1ca2c, #f7e291);
            }
            &.i-4{
              background: linear-gradient(to bottom, #f18c64, #f6b883);
            }
            &.i-5{
              background: linear-gradient(to bottom, #686bb0, #8f91c7);
            }
          }
        }
        &.bottom{
          >td{
            padding-bottom: 10px;
          }
        }
      }
    }
  }
  >h2{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 30px;
  }
}
/*
第六章：柱状图，有的只用一种颜色的柱子，有的柱子有两种颜色相间，前面几个章节也有这种图表
*/
.inter_column_analysis_container {
  .column_analysis_chart {
    margin-top: 10px;
    padding: 0 35px;
    .column_analysis_chart_box {
      height:595px;
      position: relative;
      background: #FFF;
      .chart-box {
        width: 100%;
        height: 520px;
      }
      .y-name {
        position: absolute;
        top: 35px;
        right: 4%;
        font-size: 12px;
        color: #989898;
      }
      >h3{
        color: #666;
        font-size: 18px;
        position: absolute;
        font-weight: normal;
        width: 100%;
        text-align: center;
        bottom: 20px;
      }
      .mark{
        color: #666;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        width: 160px;
        margin: 0 auto;
        >div{
          width: 80px;
          height: 20px;
          >i{
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 5px 0 0 ;
            background: -webkit-gradient(linear,left top,left bottom,from(#4b8bc9),to(#91ecb4));
          }
          &:nth-child(2)>i{
            background: -webkit-gradient(linear,left top,left bottom,from(#a9d49e),to(#70bf72));
          }
          &:nth-child(2)>.line-mark{
            display: inline-block;
            width: 20px;
            height: 2px;
            margin: 10px 5px 0 0 ;
            background: green;
            vertical-align: top;
          }
        }

      }
    }

  }
  >h4{
    color: #666;
    text-align: center;
    width: 100%;
    padding: 20px 0 25px ;
    >b{
      color: #000;
    }
  }
  .detail-title{
    color: #0a122d;
    font-weight: 700;
    padding: 0 35px;
  }
}
.horizontal-content {
  background: #fff;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  &.half {
    background: transparent;
    .half-content {
      width: 49%;
      height: 100%;
      background: #fff;
      border-radius: 7px;
      &.left {
        float: left;
      }
      &.right {
        float: right;
      }
    }
  }
}

.text-center {
  text-align: center;
}
